<template>
	<!-- 首页顶部 -->
	<view>
		<view class='top_view' :style="topStyle"></view>
		<view class='top_posit' @click="choose_location">
			<image class='icon' src="/static/icon1.png"></image>
			<view class='user_adr'>{{address}}</view>
		 </view>
		 <view class='search_box' :class="showPage==2?'box2':''" @click="nav_search">
			 <image class="icon" src="/static/icon2.png"></image>
			 <view class='text'>{{showPage==1?'搜索职位/单位名称':'搜索职位名称'}}</view>
		 </view>
	</view>
</template>

<script>
	export default{
		props: {
		    topStyle: {
		        type: String
			},
			address: {
				type: String
			},
			showPage: {
				type: Number
			}
		},
		methods:{
			// 重新选择定位
			choose_location(){
				this.$emit('chooseLocation');
			},
			nav_search(){
				this.$emit("navSearch")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top_view{
		width: 100%;
	}
	.top_posit{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 210rpx 30rpx 32rpx;
		.icon{
			width: 42rpx;
			height: 42rpx;
		}
		.user_adr{
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			max-width: 430rpx;
			height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 42rpx;
			color: #fff;
			margin-left: 8rpx;
		}
	}
	.search_box{
		margin: 0 32rpx;
		padding: 12rpx 0 12rpx 204rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: rgba(255,255,255,0.21);
		border-radius: 12rpx;
		.icon{
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
		.text{
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: rgba(255,255,255,0.81);
		}
	}
	.box2{
		padding: 12rpx 0 12rpx 234rpx;
	}
</style>
